<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>hello world</h1>
</div>

<script >
    /**
     * 通过js中的模板语法实现数据结构编写
     * 在实现数据渲染时 如果想要实现数据的响应式 可以使用vue中的插值语法 {{}}
     *  在插值语法中支持表达式的运算
     *  1.数学运算
     *  2.比较运算
     *  3.逻辑运算
     *  4. 三目运算
     *  5.函数调用
     *  如果对于显示的数据 需要做简单的处理  则可以使用插值语法支持的表达式实现  ,如果运算比较复杂可以使用vue中后续
     *  学习的计算属性实现
      */
    const app = new  Vue({
        template:`<div>
                    <span>{{info.toUpperCase()}}</span>
                    <span>{{age+10}}</span>
                    <span>{{age>18}}</span>
                    <span>{{flag&&false}}</span>
                    <span>{{flag ? "hello":"world"}}</span>
                  </div>`,
        data:{
            info:"hello vue",
            age:20,
            flag:false
        }
    })
    app.$mount("#app")
</script>

<!--
    通过模板语法和插值语法的使用 解决了响应式数据的渲染和模板字符串拼接问题,但是使用template渲染数据 会将容器中原有的内容覆盖 如何解决?

    通过将需要渲染的数据或者页面结构直接卸载vue实例绑定的容器中 ,从而解决内容覆盖的问题
-->
</body>
</html>